<template>
  <div>
    <h1 class="tittle">自产单(和目)</h1>
    <van-form
      @submit="onSubmit"
      input-align="center"
      error-message-align="center"
    >
      <!-- 客户姓名 -->
      <van-field
        v-model="form.客户姓名"
        label="客户姓名"
        placeholder="客户姓名"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <!-- 客户号码 -->
      <van-field
        v-model="form.客户号码"
        label="客户号码"
        placeholder="客户号码"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <!-- 客户地址 -->
      <van-field
        v-model="form.客户地址"
        label="客户地址"
        placeholder="客户地址"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <!-- 业务办理日期 -->
      <van-field
        readonly
        clickable
        :value="form.date"
        label="业务办理日期"
        placeholder="系统自动生成"
      />
      <!-- 客户接触方式 -->
      <van-field
        readonly
        clickable
        :value="form.touch"
        label="客户接触方式"
        placeholder="选择"
        @click="showTouch = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showTouch" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.touch"
          @confirm="onConfirmTouch"
          @cancel="showTouch = false"
        />
      </van-popup>
      <!-- 业务状态登记 -->
      <van-field
        readonly
        clickable
        :value="form.register"
        label="业务状态登记"
        placeholder="选择"
        @click="showRegister = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showRegister" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.register"
          @confirm="onConfirmregister"
          @cancel="showRegister = false"
        />
      </van-popup>
      <!-- 办理套餐 -->
      <van-field
        readonly
        clickable
        :value="form.success"
        label="办理套餐"
        placeholder="选择"
        @click="showSuccess = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showSuccess" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.success"
          @confirm="onConfirmSuccess"
          @cancel="showSuccess = false"
        />
      </van-popup>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交生成</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Notify, Toast } from 'vant'
export default {
  data() {
    return {
      showRegister: false,
      showSuccess: false,
      showTouch: false,
      // 表单数据
      form: {
        touch: '上门',
        register: '成功',
      },
      baseform: {
        touch: ['上门'],
        register: [
          {
            text: '成功',
            children: [{ text: '成功' }],
          },
        ],
        success: [
          '59套餐',
          '89套餐',
          '109套餐',
          '119套餐',
          '139套餐',
          '189套餐',
          '239套餐',
          '289套餐',
        ],
      },
    }
  },
  created() {},
  methods: {
    // 提交表单
    async onSubmit(values) {
      const { data: res } = await this.$http.put('hx/hm/myupform', {
        form: this.form,
      })
      if (res.meta.status !== 200) {
        Notify({ type: 'danger', message: res.meta.msg })
        return
      }
      Notify({ type: 'success', message: res.meta.msg })
      this.$router.push({
        name: 'hmSubmit',
        params: { projectId: res.data._id, form: res.data.form },
      })
    },
    //客户接触方式
    onConfirmTouch(value) {
      this.form.touch = value
      this.showTouch = false
    },
    // 业务状态登记
    onConfirmregister(values) {
      this.form.register = values[1]
      this.showRegister = false
    },
    //办理套餐
    onConfirmSuccess(values) {
      this.form.success = values
      this.showSuccess = false
    },
  },
}
</script>

<style lang="less" scope>
.van-col {
  span {
    margin: 0 10px;
  }
}

.tittle {
  text-align: center;
}
</style>